<template>
    <div class="area" style="background-color: pink">
        <h3>这是 DeepChild 组件</h3>
        <ul>
            <li>应用层提供的数据 message 的值：{{ d_message }}</li>
            <li>APP 组件提供的 title 的值：{{ title }}</li>
            <li>APP 组件提供的 subtitle 的值：{{ d_subtitle }}</li>
            <li>获取祖先组件提供 content 的数据（并没有）：{{ d_content }}</li>
            <li>获取祖先组件提供 action 的数据（并没有，但是设置默认值）：{{ d_action }}</li>
        </ul>
        <button @click="d_changeSub('ABC')">修改APP组件中 subtitle 的值</button>
        <button @click="showInjectData">在 JS 中访问注入的数据</button>
    </div>
</template>

<script>
export default {
    // inject: ['message', 'title', 'subtitle', 'changeSubtitle'],
    inject: {  // 注入祖先组件提供的数据
        d_message: {from: 'message'}, // 应用层数据
        title: {}, // 普通数据，如果注入属性名和本地名一致，则 from 可省略
        d_subtitle: {from: 'subtitle'}, // 响应式数据
        d_changeSub: {from: 'changeSubtitle'}, // 函数
        d_content: {from: 'content'}, // 祖先组件并未提供数据，则会抛出警告
        d_action: {from: 'action', default: '关注博客'} // 祖先组件并未提供数据，则会抛出警告，可设置默认值，警告则取消
    },
    methods: {
        showInjectData() {
            console.log('应用层提供的数据 message 的值：' + this.d_message);
            console.log('APP 组件提供的 title 的值：' + this.title);
            console.log('APP 组件提供的 subtitle 的值：');
            console.log(this.d_subtitle);
            console.log('获取祖先组件提供 content 的数据（并没有）：' + this.d_content);
            console.log('获取祖先组件提供 action 的数据（并没有，但是设置默认值）：' + this.d_action);
            this.d_changeSub('EDF')
        }
    }
}
</script>

<script setup>
import {inject} from 'vue';

// 注入祖先组件提供的数据
let d_message = inject('message') // 应用层提供的数据
let d_title = inject('title') // 普通数据
let d_subtitle = inject('subtitle') // ref 响应式数据，则 d_subtitle 也是 ref 对象
let d_changeSub = inject('changeSubtitle') // 函数
let d_content = inject('content') // 祖先组件并未提供，则会抛出警告
let d_action = inject('action', '关注博客') // 祖先组件并未提供，则会抛出警告

function showInjectData() {
    console.log('应用层提供的数据 message 的值：' + d_message);
    console.log('APP 组件提供的 title 的值：' + d_title);
    console.log('APP 组件提供的 subtitle 的值：');
    console.log(d_subtitle);
    console.log('获取祖先组件提供 content 的数据（并没有）：' + d_content);
    console.log('获取祖先组件提供 action 的数据（并没有，但是设置默认值）：' + d_action);
    d_changeSub('EDF')
}
</script>